<template>
<div class="home">
    <div class="home-main">
        <h1>Eye Your Page Performance</h1>
        <div class="url-input">
            <a-input placeholder="Please input your site URL" size="large" @keyup.enter="startTest" :value="state.url" @input="event => state.url = event.target.value" />
            <a-button type="primary" size="large" @click="startTest">
                STARTING TEST
            </a-button>
        </div>
    </div>
    <div class="cover" v-show="state.status">
        <div class="loading-card">
            <div class="loader">
                <div class="loader_overlay"></div>
                <div class="loader_cogs">
                    <div class="loader_cogs__top">
                        <div class="top_part"></div>
                        <div class="top_hole"></div>
                    </div>
                    <div class="loader_cogs__left">
                        <div class="left_part"></div>
                        <div class="left_hole"></div>
                    </div>
                    <div class="loader_cogs__bottom">
                        <div class="bottom_part"></div>
                        <div class="bottom_hole"></div>
                    </div>
                </div>
                <p class="load-text">正在为您检测中，这可能需要几十秒，请稍等.....</p>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import request from "../utils/request";
import {
    useStore
} from "vuex";
import {
    reactive,
    getCurrentInstance
} from "vue"
import {
    notification
} from "ant-design-vue";
export default {
    name: "Home",

    setup(props, ctx) {
        const store = useStore();
        const state = reactive({
            url: "",
            status: false
        })
        const config = getCurrentInstance().appContext.config.globalProperties;
        const startTest = () => {
            state.status = true;
            request.post("/check", {
                url: state.url
            }).then(res => {
                console.log(res.data);
                store.commit("home/setData", res.data)
                store.commit("home/setStatus", true)
                state.status = false;
                config.$router.replace("/checkData");
            }).catch(err => {
                state.status = false;
                notification.open({
                    message: "错误警告",
                    description: "存在以下原因:\n 1. 您的URL检测地址有误;\n2. 您的网站访问速度太慢导致检测超时;\n3. 服务器出错了..."
                })
            })
        }
        return {
            state,
            startTest
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/home.scss";
</style>
